<template>
  <el-main>
    <!-- <SelectedItem msg="SelectedItem" /> -->

    <div class="cc-display searchResult">
      <div class="width80p" style="position: relative; min-height: 400px">
        <!-- 文章标题 -->
        <div style="width: 75%">
          <ClassText
            :textinfo="{ name: '考研英语第一讲', watch: '125', talk: '256' }"
            style="float: left"
          />
          <UserText
            :textinfo="{ name: '张老师', order: '125' }"
            style="float: left"
          />
          <div class="clear-float"></div>
        </div>

        <!-- 文章内容 -->
        <div
          style="
            width: 75%;
            min-height: 200px;
            position: relative;
            overflow: hidden;
            background-color: #eee;
            padding-bottom: 20px;
          "
          class="sc-display"
        >
          <article v-html="articleContent"></article>
        </div>

        <!-- 热搜排行 -->
        <FireOrder msg="FireOrder" style="width: 22.5%" />
      </div>
    </div>
  </el-main>
</template>

<script>
// @ is an alias to /src
// import SelectedItem from "./SelectedItem.vue";
import ClassText from "@/views/player/ClassText.vue";
import UserText from "@/views/player/UserText.vue";
import FireOrder from "./FireOrder.vue";

export default {
  name: "Article",
  components: {
    ClassText,
    UserText,
    FireOrder
  },
  data() {
    return {
      articleContent: ""
    };
  },
  created() {
    this.getArticleContent();
  },
  methods: {
    /**
     * @method getArticleContent && 查询文章详细信息
     */
    getArticleContent() {
      this.axios
        .post("getinfo/article_get", {
          id: this.$route.params.articleid,
          article: ""
        })
        .then(res => {
          if (res.data.errCode && res.data.errCode == "success") {
            this.articleContent = res.data.data.article;
          }
        })
        .catch(err => {
          console.log(err);
          this.articleContent = "文章不存在！";
        });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.el-main {
  padding: 0;
}
.searchResult {
  width: 100%;
  min-width: 1000px;
  margin-top: 20px;
}
.width80p {
  height: 100%;
  width: 80%;
  min-width: 1000px;
  max-width: 1200px;
}
</style>
